import React,{Component} from 'react';
import styles from  './sass/moive.scss';
import CSSModules from 'react-css-modules';

import Recnav from './Recnav';


import {NavLink,Switch,Route,Link,IndexRoute} from 'react-router-dom';
import { Tabs,Tab,Row,Col,Grid } from 'react-bootstrap';

import axios from 'axios';
import Weekone from './week/weekone.js';
const Ahref='#';//更多模块要连接的地址到recdetail
 class Recmovie extends Component{
  constructor(){
    super();
    this.state={
      movieList:[],
      Rank:[],
      VipList:[],
      SoonList:[]

    }
  }
  getHot(){
    axios({
      url:'http://47.92.98.104:8080/zhuiying/category',
      method:'post',
      params:{pname:"动作片"}


    }).then(res=>{
     // console.log(res.data);
      this.setState({
        movieList:res.data
      });
    })

  }
  getRanking(){
    axios({
      url:'http://47.92.98.104:8080/zhuiying/category',
      method:'post',
      params:{pname:'喜剧片'}
    }).then(res=>{
      //console.log(res.data);
      this.setState({
        Rank:res.data
      });
    })
  }

//会员专享
  getVip(){
    axios({
      url:'http://47.92.98.104:8080/zhuiying/category',
      method:'post',
      params:{pname:'动画片'}
    }).then(res=>{

      this.setState({
        VipList:res.data
      });
    })
  }
  componentDidMount(){
    this.getHot();
    this.getRanking();
    this.getVip();
    this. getSoon();
    this.props.history.location.pathname+'/weekone/1';

  }
  componentWillMount(){
  // console.log(this.props);
   this.props.history.location.pathname+'/1';

  }
  //即将上线
  getSoon(){
    axios({
      url:'http://47.92.98.104:8080/zhuiying/category',
      method:'post',
      params:{pname:'剧情片'}
    }).then(res=>{
      //console.log(res.data);
      this.setState({
        SoonList:res.data
      });
    })

  }

  //近期热门
  getMovieList=()=>{
   // console.log(this.state);
    var jsx=[];
    var data=this.state.movieList;
    var len=0;
    if(data.length>6){
      len=6;
    }else{
      len=data.length;
    }
    for(var i=0;i<len;i++){
      jsx.push(

        <li key={i}>
        <a href="#">
         <div styleName="common">
         <img src={data[i].cimage}/>
         <div styleName="show-box">
         <h4>{data[i].cname}</h4>
         <span>主演：{data[i].cactor}</span>
         <p><b>简介：</b>{data[i].content}</p>
      </div>
      </div>
         <h3>{data[i].cname}</h3>
         <p>{data[i].cnation}</p>
        </a>
    </li>

      )
    }

    return jsx;
  }
//电影排行榜
  getRands(){
    var jsx=[];
    var data1=this.state.Rank;
   // console.log(data1)
    var len=0;

    if(data1.length>6){
      len=6;

    }else{
      len=data1.length;

    }

    for(var i=0;i<len;i++){

      jsx.push(

      <li key={i}>
      <a href="#">

       <div styleName="common">
       <img src={data1[i].cimage}/>
       <div styleName="show-box">
       <h4>{data1[i].cname}</h4>
       <span>主演：{data1[i].cactor}</span>
       <p><b>简介：</b>{data1[i].content}</p>
    </div>
    </div>
       <h3>{data1[i].cname}</h3>
       <p>{data1[i].cnation}</p>
      </a>
  </li>
      )
    }

    return jsx;
  }

  //会员专享
  getVipList(){
    var jsx=[];
    var data2=this.state.VipList;

    var length=0;
    if(data2.length>3){
      length=3;

    }else{
      length=data2.length;

    }

//console.log(1111);
    for(var i=0;i<length;i++){
       jsx.push(
   <li key={i}>
   <a href="#">

    <div styleName="common">
    <img src={data2[i].cimage}/>
    <div styleName="show-box com-left">
    <h4>{data2[i].cname}</h4>
    <span>主演：{data2[i].cactor}</span>
    <p><b>简介：</b>{data2[i].content}</p>
 </div>
 </div>
    <h3>{data2[i].cname}</h3>

    <p>{data2[i].cnation}</p>
   </a>
</li>
       )
     }


     return jsx;

  }
  //即将上线

   //近期热门
   getSoonList=()=>{

     var jsx=[];
     var data=this.state.SoonList;
     var len=0;
     if(data.length>6){
       len=6;
     }else{
       len=data.length;
     }

     for(var i=0;i<len;i++){
       jsx.push(

         <li key={i}>
         <a href="#">
          <div styleName="common">
          <img src={data[i].cimage}/>
          <div styleName="show-box">
          <h4>{data[i].cname}</h4>
          <span>主演：{data[i].cactor}</span>
          <p><b>简介：</b>{data[i].content}</p>
       </div>
       </div>
          <h3>{data[i].cname}</h3>
          <p>{data[i].cnation}</p>
         </a>
     </li>

       )
     }

     return jsx;
   }
   getRouteData(){
    var id=this.props.location.pathname.slice(18,19);
   // console.log(this.props.location.pathname.slice(18,19))

    if(id==''){
      id=1;
        return <Route path={`${this.props.match.url}/weekone:id`} component={Weekone}>
   </Route>
    }else{
         return <Route path={`${this.props.match.url}/weekone/:id`} component={Weekone}>
      </Route>
    }

  }

  render(){
        return(
           <div styleName="recommend">
           <Recnav></Recnav>
                <div styleName="wrap-box">
                <div className="moive-hot">
                <div styleName="main_title">
                  <h2>动作片</h2>
                  <span><a href={Ahref}>更多></a></span>
                <div styleName="clear"></div>
                </div>
                <ul styleName="range-content">
               {this.getMovieList()}
               <div styleName="clear"></div>
               </ul>

                </div>


                <div className="movie-range">
                 <div styleName="main_title">
                  <h2>喜剧片</h2>
                  <span><a href={Ahref}>更多></a></span>
                 <div styleName="clear"></div>
                 </div>
            <ul styleName="range-content">
            {this.getRands()}
            </ul>
               <div styleName="clear"></div>
                </div>
                <div className="moive-vip">
                <div styleName="main_title">
                <h2>动画片</h2>
                <span><a href={Ahref}>更多></a></span>
               <div styleName="clear"></div>
               </div>
                <ul styleName="vip-content hot-content" >
                {this.getVipList()}
             <div styleName="clear"></div>
                </ul>
                </div>

                <div styleName="movie-soon">
                  <div styleName="main_title">
                    <h2>剧情片</h2>
                    <span><a href={Ahref}>更多></a></span>
                   <div styleName="clear"></div>
               </div>
                  <ul styleName="soon-data">
                     <li>11月15日<span></span></li>
                     <li>11月16日<span></span></li>
                     <li>11月17日<span></span></li>
                     <li>11月18日<span></span></li>
                     <li>11月19日<span></span></li>
                     <li>11月20日<span></span></li>
                     <div styleName="clear"></div>
                   </ul>
                   <ol styleName="soon-content range-content">
                   {this.getSoonList()}
                      <div styleName="clear"></div>
                   </ol>
                </div>



               <div className="help">
                <div styleName="help-you">


                  <h2>帮你读电影</h2>

                  <div styleName="help-content">
                  <div styleName="help-nav">
                  <span>
                     <Link to={this.props.match.url+"/weekone/1"} activeclassname="active">周一</Link>
                  </span>
                  <span>
                      <Link to={this.props.match.url+"/weekone/2"} activeclassname="active">周二</Link>
                  </span>
                  <span>
                       <NavLink to={this.props.match.url+"/weekone/3"} activeclassname="active">周三</NavLink>
                  </span>
                  <span>
                      <NavLink to={this.props.match.url+"/weekone/4"} activeclassname="active">周四</NavLink>
                  </span>
                  <span>
                       <NavLink to={this.props.match.url+"/weekone/5"} activeclassname="active">周五</NavLink>
                  </span>
                  <span>
                     <NavLink to={this.props.match.url+"/weekone/6"} activeclassname="active">周六</NavLink>
                  </span>

                  <span>
                     <NavLink to={this.props.match.url+"/weekone/7"} activeClassName="active">周日</NavLink>
                  </span>
                  </div>

                  </div>
                  <div styleName="clear"></div>
                </div>

                  <div styleName="hot-content">
                    {this.getRouteData()}
                  </div>


                {this.props.children}

               </div>
               </div>


           </div>
        )
     }
  }


export default CSSModules(Recmovie,styles,{allowMultiple:true});
